<template>
    <div>
        <div style="padding: 2px 10px 10px 10px">
            <el-button type="primary" @click="handleAddModel">新增模板</el-button>
        </div>
        <el-table
                :data="agreementModelList"
                border
                style="width: 100%;">
            <el-table-column
                    prop="modelName"
                    align="center"
                    min-width="150px"
                    label="模板名称">
                <template v-slot="scope">
                    <span @click="configureAttribute(scope.row)"
                          style="color: blue;text-decoration: underline">
                        {{scope.row.modelName}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="description"
                    align="center"
                    label="描述"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    align="center"
                    min-width="180px"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    align="center"
                    width="230px"
                    label="操作">
                <template v-slot="scope">
                    <el-button type="primary" @click="handleUpdateModel(scope.row)">修改</el-button>
                    <el-button type="danger" @click="handleDeleteModel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 增加或修改协议模板 -->
    <update :title="title" :form="form" :open="open"
            v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update>
    <!-- 配置协议模板 -->
    <configure :model-id="configureModelId" :configure-title="configureTitle" :configure-open="configureOpen"
               :items="items" v-on:configureStatusChanged="changeConfigureStatus($event)">
    </configure>
</template>

<script>
    import {getAgreementModelList, deleteAgreementModel} from "/src/api/property/model";
    import Update from "./update.vue";
    import Configure from './configure.vue'

    export default {
        name: "index",
        components: {Update, Configure},
        data() {
            return {
                //协议模板列表
                agreementModelList: [],
                //协议模板列表查询参数
                queryParams: {},
                //新增或修改的弹出框
                open: false,
                //弹出框标题
                title: '',
                //新增或修改时的form对象
                form: {},
                //配置协议属性的
                configureModelId: null,
                configureTitle: '',
                configureOpen: false,
                items: [],
            }
        },
        created() {
            this.init()
        },
        methods: {
            //初始化
            init() {
                this.getAgreementModelListByParam()
            },
            // 获取数据列表
            getAgreementModelListByParam() {
                getAgreementModelList(this.queryParams).then((response) => {
                    this.agreementModelList = response.data;
                })
            },
            //新增协议模板
            handleAddModel() {
                this.form = {}
                this.title = "新增协议信息"
                this.open = true
            },
            //修改协议模板
            handleUpdateModel(row) {
                this.form = row
                this.title = "修改协议信息"
                this.open = true
            },
            //删除协议模板
            handleDeleteModel(row) {
                this.$confirm('是否确认删除名称为"' + row.modelName + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return deleteAgreementModel(row.modelId);
                }).then(() => {
                    this.getAgreementModelListByParam();
                    this.msgSuccess("删除成功");
                })
            },
            //配置协议属性
            configureAttribute(row) {
                this.configureModelId = row.modelId
                this.items = row.modelAttributes
                if (this.items.length > 0) {
                    this.configureTitle = '修改' + row.modelName
                } else {
                    this.configureTitle = '添加' + row.modelName
                }
                this.configureOpen = true
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getAgreementModelListByParam()
            },
            //更改弹出框状态
            changeConfigureStatus(status) {
                this.configureOpen = status
                this.getAgreementModelListByParam()
            }
        },
    }
</script>

<style scoped>

</style>
